<script setup lang="ts">
import { computed, nextTick, ref } from 'vue';

import { VIcon } from '@croco/framework/icons';

interface ToolbarProps {
    refresh: boolean | undefined;
    collapsed?: boolean;
    searchRef?: any;
}

const props = withDefaults(defineProps<ToolbarProps>(), {
    searchRef: undefined,
});

const emits = defineEmits(['refresh']);

const searchFormRef = computed(() => props.searchRef);
const hasSearchForm = computed(() => !!searchFormRef.value);

const showSearchForm = ref(true);

const onFilter = () => {
    showSearchForm.value = searchFormRef.value?.onToggleVisible();
    // 隐藏查询表单的时候需要刷新下数据
    !showSearchForm.value && handleReset();
};

function handleRefresh() {
    emits('refresh');
}

function handleReset() {
    searchFormRef.value?.onReset();
    nextTick(() => handleRefresh());
}

function handleToggleCollapse() {
    searchFormRef.value?.onToggleCollapse();
}
</script>

<template>
    <transition v-if="hasSearchForm" name="slide-slow">
        <div v-show="showSearchForm" class="mr-[5px]">
            <el-button title="查询" data-icon="true" @click="handleRefresh()">
                <template #icon>
                    <VIcon icon="icon:search" />
                </template>
            </el-button>
            <el-button title="重置" data-icon="true" @click="handleReset()">
                <template #icon>
                    <VIcon icon="icon:refresh-left" />
                </template>
            </el-button>
            <el-button v-if="collapsed !== undefined" data-icon="true" :title="`${collapsed ? '展开' : '折叠'}查询表单`" @click="handleToggleCollapse()" class="ml-[5px]">
                <template #icon>
                    <VIcon :icon="collapsed ? 'icon:arrow-down' : 'icon:arrow-up'" />
                </template>
            </el-button>
        </div>
    </transition>
    <el-button v-if="refresh" data-icon="true" title="刷新" @click="handleRefresh()">
        <template #icon>
            <VIcon icon="icon:refresh" />
        </template>
    </el-button>
    <slot></slot>
    <el-button v-if="hasSearchForm" data-icon="true" :title="showSearchForm ? '隐藏筛选' : '展示筛选'" @click="onFilter()">
        <template #icon>
            <VIcon :icon="showSearchForm ? 'carbon:filter-remove' : 'carbon:filter'" />
        </template>
    </el-button>
<!--    <el-button title="更多">-->
<!--        <template #icon>-->
<!--            <VIcon icon="icon:more-filled" />-->
<!--        </template>-->
<!--    </el-button>-->
</template>

<style scoped>
/* 定义入场激活和离场激活时的过渡属性，速度设置为2秒 */
.slide-slow-enter-active,
.slide-slow-leave-active {
    transition: all 0.2s ease-out; /* 调整此处的持续时间来控制快慢 */
}

/* 定义入场开始和离场结束时的状态：完全透明且位于右侧100%位置 */
.slide-slow-enter-from,
.slide-slow-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

/* 定义入场结束和离场开始时的状态：完全不透明且位于初始位置 */
.slide-slow-enter-to,
.slide-slow-leave-from {
    opacity: 1;
    transform: translateX(0);
}

.el-button {
    width: var(--el-component-size);
    height: var(--el-component-size);
}
</style>
